<template>
  <div class="wrapper">
    <JForm :form-config="dynamicValidateForm" :read="read" @handleBoxEvent="handleBoxEvent" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import JForm from '@/components/JForm'
import { getOrgTree } from '@/api/org'
export default {
  name: 'TenantCreated',
  components: { JForm },
  props: {
    emitData: {
      type: Object,
      default: () => ({})
    },
    read: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const userInfo = [
      {
        name: 'nickName',
        label: '昵称',
        type: 'string',
        required: true,
        placeholder: ''
      },
      {
        name: 'userName',
        label: '姓名',
        type: 'string',
        required: false
      },
      {
        name: 'idType',
        label: '证件类型',
        type: 'option',
        span: 12,
        required: false,
        placeholder: '',
        config: {
          options: {}
        }
      },
      {
        name: 'idNo',
        label: '证件号码',
        type: 'string',
        required: false,
        placeholder: ''
      },
      {
        name: 'orgId',
        label: '部门',
        type: 'cascader',
        span: 12,
        required: false,
        config: {
          options: [],
          props: {
            multiple: true,
            emitPath: false,
            checkStrictly: true,
            label: 'title',
            value: 'id'
          }
        }
      },
      {
        name: 'address',
        label: '出生日期',
        type: 'string',
        required: false
      },
      {
        name: 'postCode',
        label: '邮编',
        type: 'string',
        required: false,
        placeholder: ''
      },
      {
        name: 'address',
        label: '地址',
        type: 'string',
        required: false,
        placeholder: '字典类型CODE 多个逗号分隔'
      },
      {
        name: 'backgroundUrl',
        label: '头像',
        type: 'upload',
        required: false,
        span: 24,
        config: {
          action: '/upload/url',
          fileList: ['https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'],
          beforeAvatarUpload(file) {
            console.log(12)
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
          },
          handleAvatarSuccess(res, file) {
            console.log(13)
            this.imageUrl = URL.createObjectURL(file.raw)
          }
        }
      }
    ]
    return {
      userInfo,
      formData: {},
      orgList: []
    }
  },
  computed: {
    dynamicValidateForm() {
      const data = this.userInfo
      const result = []
      data.forEach(i => {
        const { type } = i
        if (type === 'option') {
          i.config.options = this.filterOption(i)
        }
        result.push(i)
      })
      if (this.formData) {
        result.forEach(i => {
          const { name } = i
          i.value = this.formData[name]
        })
      }
      return result
    },
    ...mapState('dictionary', ['dic']),
    idTypeOption() {
      const data = this.dic['ID_TYPE'] || []
      const result = []
      data.forEach(i => {
        const { code, name } = i
        result.push({
          label: name,
          value: +code
        })
      })
      return result
    },
    orgIdOption() {
      const data = this.orgList || []
      data.forEach(item => {
        const { code, name } = item
        item.value = +code
        item.label = name
      })
      return data
    }
  },
  watch: {
    emitData: {
      handler: function(newval, oldval) {
        const isEmpty = Object.keys(newval)
        if (isEmpty.length) {
          const becomeWidget = this.transformValue(newval, 'widget')
          this.formData = becomeWidget
        }
      },
      immediate: true
    }
  },
  created() {
    this.getDictListByType('ID_TYPE')
    this.getOrgTree()
  },
  mounted() {},
  methods: {
    ...mapActions('dictionary', ['getDictListByType']),
    getOrgTree() {
      getOrgTree().then(res => {
        const { data, code } = res
        if (code === 200) {
          this.orgList = data
        }
      })
    },
    transformValue(value, type = '') {
      const result = value
      return result
    },
    handleBoxEvent(emitObj) {
      this.submitForm(emitObj)
    },
    filterOption(item) {
      const key = item.name
      return this[`${key}Option`]
    },
    submitForm(emitObj) {
      const target = this.transformValue(emitObj, 'from')
      this.$emit('handleBoxEvent', { target })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
